<template>
  <view class="container">
    <view>
      <BhTitle titleText="店铺审核列表"></BhTitle>
    </view>
    <view class="search-bar-wrap" :style="'top: ' + titleHeight + 'px;'">
      <view class="bh-row bh-justify-space-between search-bar-condition">
        <view :class="['search-bar-condition-item', postDto.areaCode ? 'search-bar-condition-item-active' : '']" @click="tapArea">
          <view>{{ displayArea }}</view>
          <view class="triangle"></view>
          <view class="orange-line" v-if="postDto.areaCode"></view>
        </view>
        <view :class="['search-bar-condition-item', postDto.industryId ? 'search-bar-condition-item-active' : '']" @click="tapIndustryId">
          <view>{{ displayIndustryId }}</view>
          <view class="triangle"></view>
          <view class="orange-line" v-if="postDto.industryId"></view>
        </view>
        <view :class="['search-bar-condition-item', postDto.acreageMin >= 0 && postDto.acreageMax >= 0 ? 'search-bar-condition-item-active' : '']" @click="tapAcreage">
          <view>{{ displayAcreage }}</view>
          <view class="triangle"></view>
          <view class="orange-line" v-if="postDto.acreageMin >= 0 && postDto.acreageMax >= 0"></view>
        </view>
        <view :class="['search-bar-condition-item', postDto.rentMin >= 0 && postDto.rentMax >= 0 ? 'search-bar-condition-item-active' : '']" @click="tapRent">
          <view>{{ displayRent }}</view>
          <view class="triangle"></view>
          <view class="orange-line" v-if="postDto.rentMin >= 0 && postDto.rentMax >= 0"></view>
        </view>
        <view :class="['search-bar-condition-item', postDto.postStatus >=0 ? 'search-bar-condition-item-active' : '']" @click="tapPostStatus">
          <view>{{ displayPostStatus }}</view>
          <view class="triangle"></view>
        </view>
      </view>
      <view style="text-align: center;
    background-color: #f5f5f5;
    font-weight: 600;
    color: #F87147;">一共查询到{{ tabList[currentTabIndex].total }}条数据，共{{ tabList[currentTabIndex].pages }}页</view>
    </view>
    <view class="body-wrap">
      <view @click="toSellDetail(item.id)" v-if="currentTabIndex == 0" v-for="(item, index) in tabList[currentTabIndex].list" :key="index">
        <postItemMyCollectSell :item="item"></postItemMyCollectSell>
      </view>
      <!-- <view @click="toBuyDetail(item.id)" v-if="currentTabIndex == 1" v-for="(item, index) in tabList[currentTabIndex].list" :key="index">
        <postItemMyCollectBuy :item="item"></postItemMyCollectBuy>
      </view> -->
      <view style="padding-top: 60rpx;" v-if="currentTabIndex == 0 && (!tabList[currentTabIndex].list || tabList[currentTabIndex].list.length == 0)">
        <bh-no-more></bh-no-more>
      </view>
      <!-- <view style="padding-top: 60rpx;" v-if="currentTabIndex == 1 && (!tabList[currentTabIndex].list || tabList[currentTabIndex].list.length == 0)">
        <bh-no-more></bh-no-more>
      </view> -->
    </view>
    <show-drop-area-sheet :show="showArea" :initValue="postDto" :top="titleHeight" :maskClosable="true" @close="closePanel" @confirm="confirmArea">
    </show-drop-area-sheet>

    <show-drop-industry-sheet :show="showIndustryId" :initValue="postDto" :top="titleHeight" :maskClosable="true" @close="closePanel" @confirm="confirmIndustryId">
    </show-drop-industry-sheet>

    <show-drop-acreage-sheet :show="showAcreage" :initValue="postDto" :top="titleHeight" :maskClosable="true" @close="closePanel" @confirm="confirmAcreage"></show-drop-acreage-sheet>
    <show-drop-rent-sheet :show="showRent" :initValue="postDto" :top="titleHeight" :maskClosable="true" @close="closePanel" @confirm="confirmRent"></show-drop-rent-sheet>
    <show-drop-audit-sheet :show="showPostStatus" :initValue="postDto" :top="conditionHeight + 175" :maskClosable="true" @close="closePanel" @confirm="confirmPostStatus"></show-drop-audit-sheet>

  </view>
</template>

<script>
import {
  Api
} from '../../api/api'
// import MoneyAreaPopup from '../../components/custom_views/money-area-popup.vue';
import {
  CustomDict
} from '../../components/custom_views/custom_dict';
import bhNoMore from '../../components/custom_views/bh-no-more.vue';
import showAreaStreetTopSheet from '../../components/custom_views/show-area-street-top-sheet.vue';
import {
  showAreaStreetSheetMixin
} from '../../components/custom_views/show-area-street-sheet-mixin'
import {
  getDefaultPostDto
} from '@/components/post_item/post_add_sell_dto';
import {
  Dict
} from '../../components/custom_views/dict';
import showDropAreaSheet from '../../components/custom_views/show-drop-area-sheet.vue'
import showDropAcreageSheet from '../../components/custom_views/show-drop-acreage-sheet.vue'
import showDropIndustrySheet from '../../components/custom_views/show-drop-industry-sheet.vue'
import showDropRentSheet from '../../components/custom_views/show-drop-rent-sheet.vue'
import {
  bhTabMixin
} from '../../components/custom_views/mixin';
import postItemMyCollectSell from '@/PostPage/post_item/post_item_my_collect_sell.vue'
import postItemMyCollectBuy from '@/PostPage/post_item/post_item_my_collect_buy.vue'
import showDropAuditSheet from '../../components/custom_views/show-drop-audit-sheet.vue'
import { BackendApi } from '../../api/backend_api';
export default {
  components: {
    bhNoMore,
    showAreaStreetTopSheet,
    showDropAreaSheet,
    showDropIndustrySheet,
    showDropAcreageSheet,
    showDropRentSheet,
    postItemMyCollectSell,
    showDropAuditSheet
  },
  mixins: [showAreaStreetSheetMixin, bhTabMixin],
  data() {
    return {
      ...bhTabMixin.initData(0),
      tabList: [{
        id: 1,
        name: '转铺',
        list: [],
        param: {
          pageNum: 1,
          pageSize: 10,
          postType: Dict.PostMainTypeEnum.Shop.childs.ShopSell.value
        }
      }],
      postDto: {
        areaCode: '',
        area: '',
        street: '',
        acreageMin: undefined,
        acreageMax: undefined,
        industryId: undefined,
        rentMin: undefined,
        rentMax: undefined,
        postStatus: undefined
      },
      // 是否显示搜索条件面板
      showArea: false,
      showIndustryId: false,
      showAcreage: false,
      showRent: false,
      showPostStatus: false,
      // 条件区域面积
      conditionHeight: 150,
      titleHeight: 0,
    }
  },
  computed: {
    // 区域
    displayArea() {
      if (this.postDto.street) {
        if (this.postDto.street.length > 3) {
          return this.postDto.street.substring(0, 3)
        }
        return this.postDto.street
      } else if (this.postDto.areaCode) {
        if (this.postDto.area.length > 3) {
          return this.postDto.area.substring(0, 3)
        }
        return this.postDto.area
      } else {
        return '区域'
      }
    },
    // 行业
    displayIndustryId() {
      if (this.postDto.industryId && this.postDto.industryId != 0) {
        let industryName = CustomDict.getDictName(this.postDto.industryId, Dict.IndustryTypeEnum)
        if (industryName.length > 3) {
          return industryName.substring(0, 3)
        }
        return industryName
      } else {
        return '类型'
      }
    },
    // 面积
    displayAcreage() {
      if (this.postDto.acreageMin >= 0 && this.postDto.acreageMax >= 0) {
        let acreageDesc = CustomDict.getAcreageDesc(this.postDto.acreageMin, this.postDto.acreageMax)
        if (acreageDesc.length > 3) {
          return acreageDesc.substring(0, 3)
        }
        return acreageDesc
      } else {
        return '面积'
      }
    },
    // 租金
    displayRent() {
      if (this.postDto.rentMin >= 0 && this.postDto.rentMax >= 0) {
        let rentDesc = CustomDict.getRentDesc(this.postDto.rentMin, this.postDto.rentMax)
        if (rentDesc.length > 3) {
          return rentDesc.substring(0, 3)
        }
        return rentDesc
      } else {
        return '租金'
      }
    },
    // 审核状态
    displayPostStatus() {
      if (this.postDto.postStatus >= 0) {
        let postStatusDesc = CustomDict.getDictName(this.postDto.postStatus, Dict.PostStatusEnum)
        if (postStatusDesc.length > 3) {
          return postStatusDesc.substring(0, 3)
        }
        return postStatusDesc
      } else {
        return '审核'
      }
    },
  },
  methods: {
    toSellDetail(postId){
      uni.navigateTo({
        url: '/PostPage/post_detail_sell/post_detail_sell_audit?postId=' + postId
      })
    },
    requestData(param) {
      let param1 = Object.assign(param, this.postDto)
      return BackendApi.v05_post_list(param1, true)
    },

    confirmArea(areaObj) {
      console.log('选择了地区信息', areaObj)
      this.postDto.area = areaObj.area
      this.postDto.areaCode = areaObj.areaCode
      this.postDto.street = areaObj.street
      this.closePanel()
      this.getTabData(0, true)
    },
    confirmIndustryId(areaObj) {
      console.log('选择了行业信息', areaObj)
      this.postDto.industryId = areaObj.industryId
      this.closePanel()
      this.getTabData(0, true)
    },
    confirmAcreage(areaObj) {
      if (areaObj) {
        this.postDto.acreageMin = areaObj.acreageMin
        this.postDto.acreageMax = areaObj.acreageMax
      } else {
        this.postDto.acreageMin = undefined
        this.postDto.acreageMax = undefined
      }

      this.closePanel()
      this.getTabData(0, true)
    },
    confirmRent(areaObj) {
      if (areaObj) {
        this.postDto.rentMin = areaObj.rentMin
        this.postDto.rentMax = areaObj.rentMax
      } else {
        this.postDto.rentMin = undefined
        this.postDto.rentMax = undefined
      }
      this.closePanel()
      this.getTabData(0, true)
    },
    confirmPostStatus(areaObj) {
      if (areaObj) {
        this.postDto.postStatus = areaObj.postStatus
      } else {
        this.postDto.postStatus = undefined
      }
      this.closePanel()
      this.getTabData(0, true)
    },
    tapArea() {
      console.log("选择地区条件")
      if (this.panelIsOpen()) {
        this.closePanel()
      } else {
        this.showArea = true
      }
    },
    tapIndustryId() {
      if (this.panelIsOpen()) {
        this.closePanel()
      } else {
        this.showIndustryId = true
      }
    },
    tapAcreage() {
      if (this.panelIsOpen()) {
        this.closePanel()
      } else {
        this.showAcreage = true
      }
    },
    tapRent() {
      if (this.panelIsOpen()) {
        this.closePanel()
      } else {
        this.showRent = true
      }
    },
    tapPostStatus() {
      if (this.panelIsOpen()) {
        this.closePanel()
      } else {
        this.showPostStatus = true
      }
    },
    panelIsOpen() {
      return this.showArea || this.showIndustryId ||
        this.showAcreage || this.showRent || this.showPostStatus
    },
    closePanel() {
      this.showArea = false
      this.showIndustryId = false
      this.showAcreage = false
      this.showRent = false
      this.showPostStatus = false
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
    this.getTabData(0, 1)
    let capsule = wx.getMenuButtonBoundingClientRect()
    this.titleHeight = capsule.height + 10 + capsule.top
  },
  onReachBottom() {
    console.log('触底了')
    this.scrolltolower()
  },
  onPullDownRefresh() {
    this.getTabData(0, true, (res) => {
      uni.stopPullDownRefresh()
    })
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);



.container {
  min-height: 100vh;
  overflow-y: scroll;
  position: relative;
  background-color: #F5F9FA;
}

.body-wrap {
  margin-top: 140rpx;
}

.orange-line {
  width: 48rpx;
  height: 8rpx;
  border-radius: 8rpx;
  background-color: #F8D247;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.search-bar-wrap {
  position: fixed;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 10000;
  // height: 88rpx;
  height: 130rpx;
}

.search-bar-condition {
  padding: 0 30rpx;
  height: 88rpx;
}

.search-bar-condition-item {
  padding: 0 16rpx;
  color: #666;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.search-bar-condition-item-active {
  font-weight: 600;
  color: #000;
}

.triangle {
  width: 0px;
  height: 0px;
  border: 10rpx solid transparent;
  border-top-color: #333333;
  margin-top: 10rpx;
  margin-left: 10rpx;
}
</style>